<template>
    <div class="page">
        <div class="box flexbet">
            <div>
                <el-select v-model="projectName" placeholder="请选择">
                    <el-option
                        v-for="item in projectNameOpt"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-select v-model="period" placeholder="请选择">
                    <el-option
                        v-for="item in periodOpt"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-date-picker
                    v-model="startDate"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
                <el-date-picker
                    v-model="endDate"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
                <el-button icon="el-icon-search" class="bluebtn"
                    >查询</el-button
                >
            </div>
            <div>
                <el-button icon="el-icon-download">导出数据</el-button>
                <el-button icon="el-icon-refresh">刷新</el-button>
            </div>
        </div>
        <div class="totalList">
            <el-card
                class="boxcard"
                v-for="(item, index) in totalList"
                :key="index"
            >
                <div class="flexbet mid">
                    <div class="flexcol">
                        <span class="tit">{{ item.name }}</span>
                        <span class="bigfont">{{ item.realTimeData }}</span>
                        <span>
                            <span :class="item.changeStatus ? 'green' : 'red'">
                                <i
                                    class="bold"
                                    :class="
                                        item.changeStatus
                                            ? 'el-icon-top'
                                            : 'el-icon-bottom'
                                    "
                                ></i>
                                <span
                                    >{{ item.changeData }}{{ item.unit }}</span
                                >
                                %</span
                            >
                            <span>较上月</span>
                        </span>
                    </div>
                    <div class="iconbox" :class="'iconbg' + index">
                        <img :src="item.iconUrl" class="totalicon" />
                    </div>
                </div>
                <div class="flexbet bot">
                    <span
                        v-for="(item2, index2) in item.numList"
                        :key="index2"
                        class="sfont"
                    >
                        {{ item2.label }}:{{ item2.num }}
                    </span>
                </div>
            </el-card>
        </div>
        <el-row class="mb30" :gutter="20">
            <el-col :span="17">
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold black">项目进度统计</span>
                        <div>
                            <button
                                v-for="(item, index) in btns"
                                :key="index"
                                size="mini"
                                class="minibtn"
                                :class="index == 1 ? 'activebtn' : 'mr10'"
                            >
                                {{ item }}
                            </button>
                        </div>
                    </div>
                    <div
                        id="projectTrend"
                        style="width: 100%; height: 380px"
                    ></div>
                </div>
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold black">安全风险监测</span>
                        <span class="blue">查看全部</span>
                    </div>
                    <div class="flexrow">
                        <div
                            id="safeTrend"
                            style="width: 40%; height: 380px; margin: 0 auto"
                        ></div>
                        <ul class="msgbox">
                            <li
                                v-for="(item, index) in msgList"
                                :key="index"
                                :class="'msg' + item.status"
                            >
                                <div class="flexbet">
                                    <span class="tit">{{ item.title }}</span>
                                    <span class="tag">{{
                                        item.statusName
                                    }}</span>
                                </div>
                                <span class="desc">{{ item.desc }}</span>
                                <div class="flexbet">
                                    <span class="sfont">{{ item.time }}</span>
                                    <el-button size="mini">处理</el-button>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold black">人员出勤情况</span>
                        <div>
                            显示：
                            <el-select
                                v-model="projectName2"
                                placeholder="请选择"
                                class="select"
                            >
                                <el-option
                                    v-for="item in projectNameOpt"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <el-table :data="tabledata" class="table">
                        <el-table-column label="项目名称">
                            <template slot-scope="scope">
                                <span
                                    class="circle"
                                    :class="'circle' + scope.row.lever"
                                ></span>
                                <span>{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="suppose"
                            label="应到人数"
                            width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="real"
                            label="实到人数"
                            width="100"
                        >
                        </el-table-column>
                        <el-table-column label="出勤率">
                            <template slot-scope="scope">
                                <el-progress
                                    :percentage="
                                        parseInt(
                                            (scope.row.real /
                                                scope.row.suppose) *
                                                100
                                        )
                                    "
                                    :color="
                                        scope.row.lever == 1
                                            ? '#00B42A'
                                            : '#FF7D00'
                                    "
                                    :stroke-width="8"
                                ></el-progress>
                            </template>
                        </el-table-column>
                        <el-table-column label="未到原因" width="250">
                            <template slot-scope="scope">
                                <span
                                    v-for="(item, index) in scope.row.reason"
                                    :key="index"
                                    >{{ item.name }}:{{ item.num
                                    }}<span v-if="index !== 2">，</span></span
                                >
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <span class="blue">详情</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="7">
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold black">项目状态分布</span>
                        <span class="blue">查看全部</span>
                    </div>
                    <div
                        id="statusTrend"
                        style="width: 100%; height: 380px"
                    ></div>
                    <div class="flexbet" style="width: 100%">
                        <div
                            class="progressbox"
                            v-for="(item, index) in statusProgress"
                            :key="index"
                        >
                            <div class="flexbet mb10">
                                <span class="mr20">{{ item.name }}</span>
                                <span :class="'font' + index"
                                    >{{ item.num }} %</span
                                >
                            </div>
                            <el-progress
                                :percentage="item.num"
                                :show-text="false"
                                :color="index == 0 ? '#00B42A' : '#165DFF'"
                                :stroke-width="8"
                            ></el-progress>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold black">设备运行状态</span>
                        <span class="blue">查看全部</span>
                    </div>

                    <ul class="eqProgress">
                        <li v-for="(item, index) in eqProgress" :key="index">
                            <div class="flexbet">
                                <span>{{ item.name }}</span>
                                <span>
                                    <span>
                                        {{ item.current }}/{{ item.total }}
                                    </span>
                                    {{ item.status }}</span
                                >
                            </div>
                            <el-progress
                                :percentage="
                                    parseInt((item.current / item.total) * 100)
                                "
                                :show-text="false"
                                :color="item.type == 1 ? '#00B42A' : '#FF7D00'"
                                :stroke-width="8"
                            ></el-progress>
                        </li>
                    </ul>
                </div>
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold black">近期预警信息</span>
                        <el-tag class="redtag">5条未处理</el-tag>
                    </div>
                    <ul class="unReadmsgbox">
                        <li
                            v-for="(item, index) in unReadmsgList"
                            :key="index"
                            :class="'msg' + item.status"
                        >
                            <div class="flexbet">
                                <span class="tit">{{ item.title }}</span>
                                <span class="sfont">{{ item.time }}</span>
                            </div>
                            <span class="desc">{{ item.desc }}</span>
                            <div class="imgbox2">
                                <img
                                    v-for="(item2, index2) in item.imgUrl"
                                    :key="index2"
                                    :src="item2"
                                />
                            </div>
                            <el-button v-if="item.status !== 3" size="mini"
                                >查看详情</el-button
                            >
                        </li>
                    </ul>
                </div>
                <div class="card weather">
                    <div class="title flexbet">
                        <span class="bold black">天气信息</span>
                        <span class="sfont"
                            >{{ weather.location }} · {{ weather.date }}</span
                        >
                    </div>
                    <div class="flexbet mid">
                        <div class="flexcol">
                            <span class="bigfont"
                                >{{ weather.temperature }}°C</span
                            >
                            <span>{{ weather.temdesc }}</span>
                        </div>
                        <img class="weatherimg" :src="weather.imgUrl" />
                    </div>
                    <ul class="flexbet">
                        <li
                            v-for="(item, index) in weather.feature"
                            :key="index"
                            class="weatherbox"
                        >
                            <span>{{ item.time }}</span>
                            <span class="tem">{{ item.temperature }}°C</span>
                            <img
                                :src="item.imgUrl"
                                :class="index == 2 ? 'small' : ''"
                            />
                        </li>
                    </ul>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            totalList: [],
            btns: ["按阶段", "按部门"],
            active0: 0,
            periodOpt: [
                {
                    value: 1,
                    label: "今日",
                },
                {
                    value: 2,
                    label: "本周",
                },
                {
                    value: 3,
                    label: "本月",
                },
                {
                    value: 4,
                    label: "本季度",
                },
                {
                    value: 5,
                    label: "今年",
                },
                {
                    value: 6,
                    label: "自定义",
                },
            ],
            period: 1,
            projectNameOpt: [
                { value: 1, label: "全部项目" },
                {
                    value: 2,
                    label: "总部基地项目",
                },
                {
                    value: 3,
                    label: "科技园项目",
                },
                {
                    value: 4,
                    label: "商业广场项目",
                },
            ],
            projectName: 1,
            projectName2: 1,
            startDate: "",
            endDate: "",
            pointLocationOpt: [
                { value: 1, label: "全部监测位置" },
                {
                    value: 2,
                    label: "男厕基坑边",
                },
            ],
            pointLocation: 1,
            statusProgress: [
                {
                    name: "计划完成率",
                    num: 92.3,
                },
                {
                    name: "质量合格率",
                    num: 97.8,
                },
            ],
            eqProgress: [
                {
                    name: "塔吊",
                    total: 12,
                    current: 10,
                    status: "正常",
                    type: 1,
                },
                {
                    name: "施工电梯",
                    total: 25,
                    current: 24,
                    status: "正常",
                    type: 1,
                },
                {
                    name: "混凝土搅拌机",
                    total: 15,
                    current: 16,
                    status: "正常",
                    type: 1,
                },
                {
                    name: "挖掘机",
                    total: 10,
                    current: 8,
                    status: "正常",
                    type: 2,
                },
                {
                    name: "装载机",
                    total: 8,
                    current: 6,
                    status: "正常",
                    type: 2,
                },
            ],
            msgNum: 5,
            msgList: [
                {
                    status: 3, //1低风险 2中风险 3高风险
                    statusName: "高风险",
                    title: "未佩戴安全帽",
                    desc: "科技园项目-A3施工区域",
                    time: "2025-07-14 09:32",
                },
                {
                    status: 2,
                    statusName: "中风险",
                    title: "违规操作设备",
                    desc: "商业广场项目-地下一层",
                    time: "2025-07-14 14:15",
                },
                {
                    status: 2,
                    statusName: "中风险",
                    title: "人员聚集",
                    desc: "总部基地项目-生活区",
                    time: "2025-07-14 16:42",
                },
                {
                    status: 1,
                    statusName: "低风险",
                    title: "为穿反光衣",
                    desc: "科技园项目-材料堆放区",
                    time: "2025-07-14 18:05",
                },
            ],
            unReadmsgList: [
                {
                    status: 3, //0超低 1低风险 2中风险 3高风险
                    title: "未佩戴安全帽",
                    desc: "科技园项目-A3施工区域",
                    time: "10分钟前",
                    imgUrl: [
                        "../../static/board/demo.png",
                        "../../static/board/demo.png",
                    ],
                },
                {
                    status: 2,
                    title: "违规操作设备",
                    desc: "商业广场项目-地下一层",
                    time: "35分钟前",
                    imgUrl: [],
                },
                {
                    status: 1,
                    title: "人员聚集",
                    desc: "总部基地项目-生活区",
                    time: "1小时前",
                    imgUrl: [],
                },
                {
                    status: 0,
                    title: "为穿反光衣",
                    desc: "科技园项目-材料堆放区",
                    time: "2小时前",
                },
                {
                    status: 0,
                    title: "违规用电",
                    desc: "住宅小区项目-临时用电箱",
                    time: "3小时前",
                },
            ],
            tabledata: [
                {
                    lever: 1,
                    name: "总部基地项目",
                    suppose: 286,
                    real: 278,
                    per: 97,
                    reason: [
                        { name: "病假", num: 4 },
                        { name: "事假", num: 2 },
                        { name: "其他", num: 4 },
                    ],
                },
                {
                    lever: 1,
                    name: "科技园项目",
                    suppose: 354,
                    real: 342,
                    per: 96,
                    reason: [
                        { name: "病假", num: 6 },
                        { name: "事假", num: 4 },
                        { name: "其他", num: 2 },
                    ],
                },
                {
                    lever: 2,
                    name: "商业广场项目",
                    suppose: 412,
                    real: 376,
                    per: 91,
                    reason: [
                        { name: "病假", num: 12 },
                        { name: "事假", num: 14 },
                        { name: "其他", num: 10 },
                    ],
                },
                {
                    lever: 1,
                    name: "住宅项目",
                    suppose: 202,
                    real: 198,
                    per: 98,
                    reason: [
                        { name: "病假", num: 2 },
                        { name: "事假", num: 1 },
                        { name: "其他", num: 1 },
                    ],
                },
            ],
            weather: {
                location: "北京",
                date: "2025-07-15",
                temperature: 28,
                temdesc: "多云转晴",
                imgUrl: "../../static/board/sun.png",
                feature: [
                    {
                        time: "今天",
                        temperature: 28,
                        imgUrl: "../../static/board/sun.png",
                    },
                    {
                        time: "明天",
                        temperature: 26,
                        imgUrl: "../../static/board/clound.png",
                    },
                    {
                        time: "后天",
                        temperature: 24,
                        imgUrl: "../../static/board/rain.png",
                    },
                    {
                        time: "周四",
                        temperature: 25,
                        imgUrl: "../../static/board/clound.png",
                    },
                ],
            },
        };
    },
    computed: {},
    watch: {},
    mounted() {
        this.totalList = [
            {
                name: "项目总数",
                realTimeData: 32,
                changeStatus: 1, //0降低 1增长
                changeData: 8.2,
                iconUrl: "../../static/board/com.png",
                numList: [
                    {
                        label: "进行中",
                        num: 24,
                    },
                    {
                        label: "已完成",
                        num: 8,
                    },
                    {
                        label: "延期",
                        num: 2,
                    },
                ],
            },
            {
                name: "人员总数",
                realTimeData: "1,254",
                changeStatus: 1, //0降低 1增长
                changeData: 12.5,
                iconUrl: "../../static/board/person.png",
                numList: [
                    {
                        label: "在岗",
                        num: 1024,
                    },
                    {
                        label: "请假",
                        num: 187,
                    },
                    {
                        label: "离职",
                        num: 44,
                    },
                ],
            },
            {
                name: "安全事件",
                realTimeData: 12,
                changeStatus: 0, //0降低 1增长
                changeData: 4.3,
                iconUrl: "../../static/board/warn.png",
                numList: [
                    {
                        label: "高风险",
                        num: 2,
                    },
                    {
                        label: "中风险",
                        num: 5,
                    },
                    {
                        label: "低风险",
                        num: 5,
                    },
                ],
            },
            {
                name: "设备总数",
                realTimeData: 867,
                changeStatus: 1, //0降低 1增长
                changeData: 5.7,
                iconUrl: "../../static/board/set.png",
                numList: [
                    {
                        label: "正常",
                        num: 823,
                    },
                    {
                        label: "维修中",
                        num: 34,
                    },
                    {
                        label: "报废",
                        num: 10,
                    },
                ],
            },
        ];
        this.projectTrendFn();
        this.safeTrendFn();
        this.statusTrendFn();
    },
    methods: {
        projectTrendFn() {
            let projectTrend = this.$echarts.init(
                document.getElementById("projectTrend")
            );
            projectTrend.setOption({
                color: ["#BBCAEA", "#CFF4F3"],
                grid: {
                    left: "4%",
                    right: "4%",
                    bottom: "20%",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    top: "2%",
                    left: "center",
                    itemWidth: 30,
                    itemHeight: 10,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: ["计划进度", "实际进度"],
                },
                xAxis: [
                    {
                        type: "category",
                        axisLabel: {
                            margin: 10, // 调整标签与刻度线之间的距离
                        },
                        splitLine: {
                            //x网格样式
                            show: true,
                            lineStyle: {
                                color: "#E0E6F1",
                                type: "solid",
                                width: "1",
                            },
                        },
                        // axisTick: {
                        //     alignWithLabel: true, // 确保标签与刻度线对齐
                        // },
                        data: [
                            "地基与基础",
                            "主体结构",
                            "装饰装修",
                            "屋面工程",
                            "给排水",
                            "电气安装",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            formatter: "{value}%",
                        },
                        max: 100,
                        splitNumber: 10,
                    },
                ],
                series: [
                    {
                        name: "计划进度",
                        type: "bar",
                        itemStyle: {
                            borderColor: "#165DFF",
                            borderWidth: 1,
                            borderRadius: [5, 5, 0, 0],
                        },
                        data: [85, 75, 60, 45, 50, 40],
                    },
                    {
                        name: "实际进度",
                        type: "bar",
                        itemStyle: {
                            borderColor: "#3FD1CE",
                            borderWidth: 1,
                            borderRadius: [5, 5, 0, 0],
                        },
                        data: [90, 82, 68, 50, 55, 45],
                    },
                ],
            });
        },

        statusTrendFn() {
            let statusTrend = this.$echarts.init(
                document.getElementById("statusTrend")
            );
            statusTrend.setOption({
                color: ["#457DFF", "#3FD1CE", "#33C355", "#F76565", "#717A87"],
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    orient: "vertical",
                    top: "center",
                    right: "0",
                    itemWidth: 35,
                    itemHeight: 10,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                },
                series: [
                    {
                        type: "pie",
                        radius: ["50%"],
                        center: ["30%", "50%"],
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                        itemStyle: {
                            borderRadius: 5,
                        },

                        data: [
                            { name: "计划中", value: 5 },
                            { name: "进行中", value: 24 },
                            { name: "已完成", value: 8 },
                            { name: "延期", value: 2 },
                            { name: "暂停", value: 3 },
                        ],
                    },
                ],
            });
        },
        safeTrendFn() {
            let safeTrend = this.$echarts.init(
                document.getElementById("safeTrend")
            );
            safeTrend.setOption({
                color: ["#F76565", "#FF9733", "#717A87", "#33C355"],
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    bottom: "8%",
                    left: "center",
                    itemWidth: 35,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                },
                series: [
                    {
                        type: "pie",
                        radius: ["43%", "60%"],
                        avoidLabelOverlap: false,
                        center: ["50%", "40%"],
                        label: {
                            show: false,
                            position: "center",
                            formatter: "{b}: {c} ({d}%)",
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        itemStyle: {
                            borderRadius: 5,
                        },
                        data: [
                            { value: 13, name: "高风险" },
                            { value: 30, name: "中风险" },
                            { value: 45, name: "低风险" },
                            { value: 870, name: "正常" },
                        ],
                    },
                ],
            });
        },

        /////////////////////////
    },
};
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    background: #f5f5f5;
    padding: 20px 10px;
    padding: 30px;
    font-size: 16px;
    color: #7a7b7c;
    .card {
        padding: 20px;
        background: #fff;
        border-radius: 10px;
        margin-bottom: 20px;
        -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
}

.flexrow {
    display: flex;
    flex-direction: row;
}
.flexcol {
    display: flex;
    flex-direction: column;
}

.flexbet {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.flexwrap {
    display: felx;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.totalList {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: 20px 0;
    .boxcard {
        width: 24%;
        color: #7a7b7c;
        border-radius: 10px;
        .tit {
            align-items: baseline;
            .tag {
                border-radius: 30px;
                width: 60px;
                text-align: center;
                font-size: 14px;
                color: #fff;
                padding: 3px 0;
            }
        }
        .mid {
            padding-bottom: 20px;
            border-bottom: 1px solid #f2f6fc;
            .iconbox {
                width: 50px;
                height: 70px;
                border-radius: 10px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .totalicon {
                    width: 30px;
                    height: 30px;
                }
            }
            .iconbg0 {
                background: #e7eeff;
            }
            .iconbg1 {
                background: #e7f9f9;
            }
            .iconbg2 {
                background: #feebeb;
            }
            .iconbg3 {
                background: #fff2e5;
            }
        }
        .bot {
            font-size: 14px;
            margin-top: 20px;
        }
    }
}

.msgbox {
    flex: 1;
    padding: 20px;
    li {
        width: 100%;
        padding: 10px 15px;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        border-radius: 4px;
        .tit {
            color: #000;
            font-size: 16px;
        }
        .flexbet {
            align-items: center;
        }
        .desc {
            margin-bottom: 10px;
        }
    }
    .msg1 {
        background: #f9f9fa;
        border-left: 4px solid #86909c;
        font-size: 14px;
        .tag {
            color: #86909c;
            background: #eeeff1;
        }
        .el-button {
            color: #fff;
            background: #86909c;
            border: 1px solid #86909c;
        }
    }
    .msg2 {
        background: #fff8f2;
        border-left: 4px solid #ff7d00;
        font-size: 14px;
        .tag {
            color: #ff7d00;
            background: #ffecd9;
        }
        .el-button {
            color: #fff;
            background: #ff7d00;
            border: 1px solid #ff7d00;
        }
    }
    .msg3 {
        background: #fef5f5;
        border-left: 4px solid #f53f3f;
        font-size: 14px;
        .tag {
            color: #f53f3f;
            background: #fde2e2;
        }
        .el-button {
            color: #fff;
            background: #f53f3f;
            border: 1px solid #f53f3f;
        }
    }
}
.unReadmsgbox {
    flex: 1;
    padding: 20px;
    li {
        width: 100%;
        padding: 10px 15px;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        border-radius: 4px;
        .tit {
            color: #000;
            font-size: 16px;
        }
        .flexbet {
            align-items: center;
        }
        .desc {
            margin-bottom: 10px;
        }
        .el-button {
            display: inline-block;
            width: 80px;
        }
        .imgbox2 {
            display: flex;
            flex-direction: row;
            img {
                width: 40px;
                height: 40px;
                margin-right: 10px;
            }
        }
    }
    .msg0 {
        background: #f9f9fa;
        border-left: 4px solid #86909c;
        font-size: 14px;
        .el-button {
            color: #fff;
            background: #86909c;
            border: 1px solid #86909c;
        }
    }
    .msg1 {
        background: #f3f7ff;
        border-left: 4px solid #165dff;
        font-size: 14px;
        .el-button {
            color: #fff;
            background: #165dff;
            border: 1px solid #165dff;
        }
    }
    .msg2 {
        background: #fff8f2;
        border-left: 4px solid #ff7d00;
        font-size: 14px;
        .tag {
            color: #ff7d00;
            background: #ffecd9;
        }
        .el-button {
            color: #fff;
            background: #ff7d00;
            border: 1px solid #ff7d00;
        }
    }
    .msg3 {
        background: #fef5f5;
        border-left: 4px solid #f53f3f;
        font-size: 14px;
    }
}

.active0 {
    background: #e7eeff !important;
    color: #2762ef !important;
}

.bold {
    font-weight: 800;
}
.black {
    color: #000;
}
.red {
    color: #fa746b;
}
.green {
    color: #3dd4a7;
}
.blue {
    color: #2762ef;
}
.greenbg {
    background: #3dd4a7;
}
.yellowbg {
    background: #fddb78;
}
.redbg {
    background: #fa746b;
}
.circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 0 5px;
}
.mb30 {
    margin-bottom: 30px;
}
.blockbtn {
    width: 100%;
    padding: 10px;
    text-align: center;
    border: 1px solid #d3eaff;
    color: #2762ef;
    background: #fff;
    border-radius: 10px;
}
.pad20 {
    padding: 20px;
}
.select {
    margin-right: 10px;
    width: 150px;
}
.tabletag {
    border-radius: 30px;
    width: 55px;
    padding: 0;
    text-align: center;
    height: 28px;
    line-height: 25px;
}
/deep/.el-table thead th {
    background: #f2f2f2 !important;
    color: #333;
    font-weight: 400;
}
.box {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
}
.progressbox {
    background: #f2f3f5;
    padding: 10px;
    font-size: 14px;
    color: #7a7b7c;
    width: 48%;
    .font0 {
        color: #2cb88e;
        font-size: 16px;
        font-weight: 800;
    }
    .font1 {
        color: #2762ef;
        font-size: 16px;
        font-weight: 800;
    }
}
.eqProgress {
    margin: 10px 0;
    color: #000;
    li {
        font-size: 14px;
        margin-bottom: 15px;
        .flexbet {
            margin-bottom: 5px;
        }
    }
}
.mr20 {
    margin-right: 20px;
}
.mb10 {
    margin-bottom: 10px;
}
.mb20 {
    margin-bottom: 20px;
}
.tag {
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
}
.sfont {
    font-size: 12px;
}
.bigfont {
    font-size: 36px;
    color: #000;
    font-weight: 800;
    margin-right: 10px;
}

.weather {
    .flexbet {
        align-items: center;
    }
    .mid {
        margin: 20px 0;
        .weatherimg {
            width: 40px;
            height: 40px;
        }
    }
    .weatherbox {
        background: #f7f8fa;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5px 15px;
        border-radius: 10px;
        font-size: 12px;
        .tem {
            color: #000;
            font-size: 14px;
            margin: 5px 0;
        }
        img {
            width: 20px;
            height: 20px;
        }
        .small {
            width: 15px;
            height: 15px;
        }
    }
}
.table {
    color: #000;
    margin-top: 20px;
    .circle {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
    .circle1 {
        background: #2cb88e;
    }
    .circle2 {
        background: #ff7d00;
    }
}
.bluebtn {
    color: #fff;
    background: #165dff;
    border: 1px solid #165dff;
}
.minibtn {
    font-size: 12px;
    padding: 3px 10px;
    border: none;
    border-radius: 5px;
}
.activebtn {
    color: #fff;
    background: #165dff;
}
.mr10 {
    margin-right: 10px;
}
.redtag {
    color: #f53f3f;
    background: #feebeb;
    border-radius: 15px;
    border: none;
    height: 25px;
    line-height: 25px;
}
</style>
